<template>
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- Sidebar user panel -->
      <div class="user-panel">
        <div class="pull-left image">
          <img :src="user.avatar" class="img-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p>{{ user.name }}</p>
          <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
        </div>
      </div>
      <!-- search form -->
      <form action="#" method="get" class="sidebar-form">
        <div class="input-group">
          <input type="text" name="q" class="form-control" placeholder="Search...">
          <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
        </div>
      </form>
      <!-- /.search form -->
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu" data-widget="tree">
        <li class="header">MAIN NAVIGATION</li>
        <!-- treeview menu-open -->
        <app-sidebar-menu-item v-for="item in records" :item="item" :key="item.id"></app-sidebar-menu-item>
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>
</template>

<script>
import * as API from "@/constants/api";
import SidebarMenuItem from "@/components/common/SidebarMenuItem";

export default {
  components: {
    "app-sidebar-menu-item": SidebarMenuItem
  },
  data() {
    return {
      records: []
    }
  },
  computed: {
    user() {
      return this.$storage.get("user");
    },
  },

  created: function() {
    this.$http.get(API.ADMIN_MENUS).then(response => {
      if (response.data.status == "no") {
        this.$message({
          message: response.data.message,
          type: "error",
          duration: 5000
        });
      } else {
        this.records = response.data.data;
      }
    });    
  },

  methods: {
    handleMenu(event) {
    
    }
  }  
};
</script>